<template>
  <div class="page-wrap" style="height:100vh;">
    <mt-header fixed title="登录">
      <!-- <router-link to="/index" slot="left"><mt-button icon="back"></mt-button></router-link> -->
    </mt-header>
    <!-- <div class="logo_img"><img src="../assets/logo.png" /></div> -->
    <div class="box">
      <div class="tab">
        <div class="list" v-for="(item, index) in tabList" :key="index" :class="{act:current==index}"
          @click="changeAct(index)">
          {{ item.title }}
        </div>
      </div>
      <div class="content-left">
        <div style="margin:1rem .5rem;line-height: 1rem;">
          <div class="loginType" @click="getpopupVisible">
            <mt-field :placeholder="$t('Please_select_type')" v-model="selectedValue">
              <img style="width:.6rem;height:.6rem" src="../assets/more_right.png" alt="">
            </mt-field>
          </div>
          <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom">
            <div class="picker-toolbar-title">
              <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">{{$t('cancel')}}</div>
              <div class="usi-btn-sure" @click="addrConfirm">{{$t('confirm')}}</div>
            </div>
            <mt-picker ref='picker' :slots="slots" value-key='name' @change="onValuesChange"></mt-picker>
          </mt-popup>

          <mt-field v-if="current==0" :placeholder="$t('input_account')" v-model="mobile"
            style="width: 100%;height: 1.2rem;border-bottom: 1px solid #ECECEC;"></mt-field>
          <mt-field v-if="current==1" placeholder="请输入手机号" v-model="mobile"
            style="width: 100%;height: 1.2rem;border-bottom: 1px solid #ECECEC;"></mt-field>
          <mt-field v-if="current==0" :placeholder="$t('input_password')" type="password" v-model="password"
            style="width: 100%;height: 1.2rem;border-bottom: 1px solid #ECECEC;"></mt-field>

          <mt-field :placeholder="$t('verification_code_tip')" v-model="code" v-if="current==1">
            <mt-button class="code-btn" type="default" v-if="!countdown" @click="getCode">
              {{ $t("get_code") }}</mt-button>
            <mt-button class="code-btn" size="large" disabled v-else>
              {{ countdown }} 秒后重新获取
            </mt-button>
          </mt-field>



          <div>
            <mt-button @click="login"
              style="background:#14909A;color:#fff;font-size:.4rem;letter-spacing:3px;border-radius:20px;margin-top:.7rem"
              size="large">
              {{ $t("login") }}
            </mt-button>
          </div>
          <div class="foot">
            <div class="deal">
              <mt-checklist align="left" v-model="policy" :options="['']" @change="getDealChecked">
              </mt-checklist>
              <label> {{$t('agree_text')}}</label>
              <router-link :to="{ path: 'dealText', query: { id: 1 }}">{{$t('Software_Usage_Agreement')}}</router-link>
              <router-link :to="{ path: 'dealText', query: { id: 2 }}">{{$t('Privacy_Policy')}}</router-link>
            </div>
          </div>



          <div class="forget-reg">
            <div class="forget">
              <mt-checklist align="left" v-model="remember" :options="['']" >
              </mt-checklist>
              <label style="color:#333;">{{ $t("remember") }}</label>
            </div>

            <div class="reg">
              {{ $t("havenot_account") }}
              <span @click="goreg()">{{ $t("reg_now") }}</span>
            </div>
          </div>


        </div>
      <!--  <div class="looding" v-if="!loginbtn">{{ $t("choose_best_way") }}</div>
        <div class="looding2" v-if="!loginbtn2">{{ $t("site_closed") }}</div> -->
      </div>
      <div class="content-rt"></div>
    </div>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  let Base64 = require("js-base64").Base64;

  export default {
    computed: mapState({
      loginbrn: state => state.loginbrn /* 推送数据 */
    }),
    watch: {
      loginbrn(val) {
        if (val == false) {
          this.loginbtn2 = false;
          // this.$message.error('站点已关闭！');
        } else {
          this.loginbtn2 = true;
        }
      }
    },
    created() {
      /* localStorage 方法 */
      this.getlocalStorage();
    },
    data() {
      return {
        tabList: [{
            id: 1,
            title: this.$t("acount_login")
          },
          {
            id: 2,
            title: this.$t("sms_login")
          }
        ],
        current: 0,
        loginbtn: true,
        loginbtn2: true,
        mobile: '',
        password: "",
        code:'',
        group: "app",
        selectedValue: '',

        remember: [],
        policy: [],

        slots: [{
          values: [{
              id: 0,
              name: "资管训练"
            },
            {
              id: 1,
              name: "模式"
            },
          ],
        }],
        popupVisible: false,
        vals: '',
        countdown: 0, // 倒计时时间
        timer: null, // 计时器
        isChecked: false

      };
    },
    mounted() {
      let _token = localStorage.getItem('_token') || '',
        expires = localStorage.getItem('expires') || 0;
      if (_token != '' && expires > new Date().getTime()) {
        //存在登陆状态，直接跳转到首页
        this.$router.push({
          path: '/',
          query: {
            value: 'lation'
          }
        });
      } else {
        //登陆过期，清除缓存的token
        localStorage.clear();
        sessionStorage.clear();
      }
    },
    methods: {
      startCountdown() {
        this.countdown = 60; // 设置倒计时时间，如60秒
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown -= 1;
          } else {
            clearInterval(this.timer);
          }
        }, 1000);
      },
      getCode() {
        //获取验证码
        var that = this;

        if (!that.mobile || that.mobile.length != 11) {
          return this.$layer.msg(that.$t('请正确输入手机号'));
        }
        let param = {}
        param.mobile = that.mobile;
        param.usage = 'login';
        this.$post('v1/site/sms-code', param).then(res => {
          console.log(res);
          if (res.code == 200) {
            that.$layer.msg(that.$t('open_account_succeed'));
            this.startCountdown();
          } else {
            that.$layer.msg(res.message);
          }
        });
      },
      getDealChecked(e) {
        console.log(e[0])
        if (e[0] == '') {
          this.isChecked = true;
        } else {
          this.isChecked = false;
        }
      },
      getpopupVisible() {
        console.log(212121)
        this.popupVisible = true
      },
      onValuesChange(picker, values) {
        this.vals = values[0].name;
      },
      addrConfirm() {
        this.selectedValue = this.vals;
        console.log(this.selectedValue)
        this.popupVisible = false;
      },
      changepwd() {
        this.$router.push({
          path: "misspassword"
        });
      },
      risk() {
        this.$router.push({
          path: "risk"
        });
      },
      bafanck() {
        this.$router.go(-1); //返回上一层
      },
      goreg() {
        this.$router.push({
          path: "reg"
        });
      },
      forget() {
        this.$router.push({
          path: "forgetpassword"
        });
      },
      /* localStorage 方法 */
      //像localStorage里存入从页面获取的用户名和密码；
      setlocalStorage(c_name, c_passwd = "") {
        console.log(c_passwd);
        localStorage.siteAccount = c_name;
        localStorage.sitePassword = Base64.encode(c_passwd);
      },
      getlocalStorage: function() {
        let account = localStorage.getItem("siteAccount");
        if (account) {
          this.isChecked = true;
          this.mobile = account;
          this.password = Base64.decode(
            localStorage.getItem("sitePassword")
          );
        }
      },
      // 储存表单信息
      setUserInfo: function() {
        // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
        // 如果没有勾选，储存的信息为空
        if (this.isChecked) {
          this.setCookie('account', this.mobile);
          // base64加密密码
          // let passWord = Base64.encode(this.param.password);
          this.setCookie('isChecked', this.isChecked);
        } else {
          this.setCookie('account', '');
          // this.setCookie('password', '');
        }
      },
      // 获取cookie
      getCookie: function(key) {
        if (document.cookie.length > 0) {
          var start = document.cookie.indexOf(key + '=');
          if (start !== -1) {
            start = start + key.length + 1;
            var end = document.cookie.indexOf(';', start);
            if (end === -1) end = document.cookie.length;
            return unescape(document.cookie.substring(start, end));
          }
        }
        return '';
      },
      // 保存cookie
      setCookie: function(cName, value, expiredays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie = cName + '=' + decodeURIComponent(value) + (expiredays == null ? '' : ';expires=' + exdate.toGMTString());
      },
      //
      //切换登录方式
      changeAct(index) {
        this.current = index;
        this.popupVisible = false;
      },
      //登录
      login() {
        this.loginbtn = false;
        let param = {},
        url,
        that = this;

        if (that.current==0&&that.mobile == "") {
          this.loginbtn = true;
          that.$layer.msg(that.$t("input_account"));
          return;
        }
        if (that.current==0&&that.password == "") {
          this.loginbtn = true;
          that.$layer.msg(that.$t("input_password"));
          return;
        }
      if (that.current==1&&that.mobile == ""&&that.param.mobile.length != 11) {
          this.loginbtn = true;
          that.$layer.msg(that.$t("请输入手机号"));
          return;
        }
        if (that.current==1&&that.code == "") {
          this.loginbtn = true;
          that.$layer.msg(that.$t("请输入手机验证码"));
          return;
        }



        if (!that.isChecked) {
          return this.$layer.msg(that.$t('请同意阅读协议'));
        }
        if(that.current==0){
          url='v1/site/login-phone'
          param.username = this.mobile;
          param.password = this.password;

        }else if(that.current==1){
           url='v1/site/login-mobile'
           param.mobile = this.mobile;
           param.code = this.code;
        }
        param.group ='app';
        this.$post(url, param).then(res => {
          console.log(res);
          this.loginbtn = true;
          if (res.code == 200 && res.data.access_token) {
            localStorage.setItem("_token", null);
            this.$svcInvoke.setConf("_token", res.data.access_token);
            localStorage.setItem("_token", res.data.access_token);
            this.$store.commit("set", {
              userInfo: res.data.member
            });
            this.$layer.msg(that.$t("login_success"));
            this.$router.push({
              path: "/"
            });
            /* localStorage 方法 */
            if (this.isChecked == true) {
              that.setlocalStorage(this.mobile, this.password);
              this.password = "";
            } else {
              that.clearlocalStorage()
            }
            this.setUserInfo();
          } else {
            this.$layer.msg(res.message || $t("login_fail"));
          }
        });


      }
    }
  };
</script>
<style scoped>
  .mint-header {
    background-color: #000;
    color: #fff;
  }

  .loginType /deep/ .mint-cell-wrapper {
    border-bottom: 1px solid #E7E7E7;
  }

  .loginType /deep/ .mint-field-core {
    color: #333;
  }


  .mint-popup {
    width: 100%;
  }

  .picker-toolbar-title {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 1rem;
    line-height: 1rem;
    background: #f5f5f5;
  }


  .usi-btn-sure {
    color: #108EE9;
    font-size: .4rem;
  }

  .usi-btn-cancel {
    color: #999;
    font-size: .4rem;
  }

  .code-btn {
    background: #14909A;
    color: #fff;
    font-size: .325rem;
  }

  .forget-reg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
  }

  .forget-reg .forget {
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .forget /deep/ .mint-cell-wrapper,
  .foot /deep/ .mint-cell-wrapper {
    padding: 0;
    height: .8rem;
  }

  .forget /deep/ .mint-checklist-label,
  .foot /deep/ .mint-checklist-label {
    padding: 0;
  }

  .forget /deep/ .mint-cell,
  .foot /deep/ .mint-cell {
    min-height: unset;
  }

  .forget /deep/ .mint-checklist-title,
  .foot /deep/ .mint-checklist-title {
    display: none;
  }

  .forget /deep/ .mint-checkbox-input:checked+.mint-checkbox-core,
  .foot /deep/ .mint-checkbox-input:checked+.mint-checkbox-core {
    background-color: #14909A;
    border-color: #14909A;
  }

  .forget /deep/ .mint-checkbox-core {
    width: .4rem;
    height: .4rem;
  }

  .foot /deep/ .mint-checkbox-core {
    width: .4rem;
    height: .4rem;
    border-radius: 2px;
    ;
  }

  .forget /deep/ .mint-checkbox-core::after,
  .foot /deep/ .mint-checkbox-core::after {
    top: 1px;
    left: 8px;
  }

  .forget-reg .reg {
    color: #333;
    font-size: .325rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .forget-reg .reg span {
    color: #2A9AA3;
    font-size: .325rem;
    font-weight: bold;
  }

  .foot {
    background-color: #fff;
    width: 100%;
  }

  .foot .deal {
    display: flex;
    align-items: center;
    height: 1rem;
  }

  .foot .deal label {
    color: #000;
    font-size: .35rem;
    font-weight: bold;
    padding-left: .0625rem;
  }

  .foot .deal a {
    text-decoration: none;
    color: #118d97;
    font-size: .3rem;
    font-weight: bold;
  }

  /deep/ .mint-cell-wrapper {
    background: #fff;
  }

  /deep/ .mint-field-core {
    background: #fff;
  }

  .page-wrap {
    background: url(../assets/login-bg.png) no-repeat center center;
    height: 100vh;
    width: 100%;
    background-size: 100% 100%;
  }

  .box {
    margin: 3.5rem .5rem 0 .5rem;
    background: #fff;
    border-radius: .25rem;
    padding-bottom: .05rem;
  }

  .tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.5rem;
    width: 100%;
    border-radius: .25rem;
  }

  .tab .list {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5rem;
    width: 50%;
    font-size: .375rem;
    color: #000;
    border-bottom: 1px solid #E7E7E7;


  }

  .list:first-child {
    border-radius: .25rem 0 0 0;
  }

  .list:last-child {
    border-radius: 0 .25rem 0 0;
  }

  .tab .list.act {
    background: #14909A;
    color: #fff;
    border-bottom: none;
  }

  .looding {
    position: fixed;
    top: 12.5rem;
    left: 3rem;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 30px;
    padding: 0.1rem;
  }

  .looding2 {
    position: fixed;
    top: 0rem;
    left: 0rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 30px;
    width: 100vw;
    height: 100vh;
    line-height: 100vh;
    text-align: center;
  }

  .logo_img {
    width: 2rem;
    height: 2rem;
    margin: 2rem auto 1rem;
    /* background-color: #eee; */
  }

  .logo_img img {
    width: 100%;
    height: 100%;
  }

  .mint-cell {
    min-height: 1rem;
    background: #414141;
    color: #fff;
  }

  .mint-field-core {
    padding: 0.066667rem 0.4rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.4rem;
    background: #414141 !important;
    color: #fff !important;
  }

  .mint-field-core {
    background: #414141;
    color: #ccc !important;
  }

  .mint-cell-wrapper {
    border: 2px solid #333 !important;
    color: #fff;
  }

  .head {
    width: 750px;
    height: 90px;
    background-color: #b3282b;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .head_left {
    width: 120px;
    height: 100px;
    display: flex;
    justify-content: flex-start;
    padding-left: 30px;
    box-sizing: border-box;
    align-items: center;
    color: #fff;
  }

  .head_zhuc {
    font-size: 26px;
  }

  .back_img {
    width: 35px;
    height: 35px;
  }

  .head_in {
    width: 510px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .head_title {
    font-size: 34px;
    color: #333333;
    margin-left: 30px;
  }

  .mintpopup4 {
    margin-top: 100px;
    height: 100px;
  }

  .mint-cell {
    margin-top: 0.5rem !important;
  }

  .goreg {
    width: 100%;
    height: 1.5rem;
    /* background: red; */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.4rem;
    letter-spacing: 1px;

    color: #9f9f9f;
  }

  .bott_log {
    background-color: #b3282b;
    width: 670px;
    height: 115px;
    margin-left: -35px;
    color: #fff;
  }
</style>
